import 'package:flutter/material.dart';
import '../models/word_card.dart';

class WordCardWidget extends StatelessWidget {
  final WordCard wordCard;
  final bool showDetails;
  final VoidCallback onTap;
  final Widget? bottomActions;

  WordCardWidget({
    required this.wordCard, 
    required this.showDetails, 
    required this.onTap,
    this.bottomActions,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.fromLTRB(16.0,16.0,16.0,8.0),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16.0),
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [
              const Color.fromARGB(74, 89, 176, 242),
              const Color.fromARGB(98, 194, 83, 216)
            ],
          ),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            SizedBox(height: 36.0),
            Image.network(
                'https://ali.bczcdn.com/r/${wordCard.imageFile}',
                width: MediaQuery.of(context).size.width * 0.8,
                fit: BoxFit.contain),
            SizedBox(height: 16.0),
            if (showDetails)
              Column(
                children: [
                  Text(
                    wordCard.word,
                    style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 8.0),
                  Text(
                    wordCard.accent,
                    style: TextStyle(fontSize: 18.0, fontStyle: FontStyle.italic),
                    textAlign: TextAlign.center,
                  ),
                  SizedBox(height: 8.0),
                  Text(
                    wordCard.meanCn,
                    style: TextStyle(fontSize: 16.0),
                    textAlign: TextAlign.center,
                  ),
                ],
              ),
            if (bottomActions != null)
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: bottomActions!,
              ),
          ],
        ),
      ),
    );
  }
}
